<template>
	<view class="person-add">
		<u-toast ref="uToast"></u-toast>
		<image src="http://118.31.238.190/home/img_enterprist_agent_add_2.png" mode="widthFix" class="person-add__top">
		</image>
		<view class="person-add__tip">上传经营资料</view>



		<view class="flex justify-between u-padding-20  person-add__content flex-wrap">
			<view class="">
				<DeliverFileUpload :maxCount="1" :width="300" @success="onOneSuccess" @remove="onRemove">
				</DeliverFileUpload>
				<view class="u-text-center">
					营业执照
				</view>
			</view>
			<view class="">
				<DeliverFileUpload :maxCount="1" :width="300" @success="onTwoSuccess" @remove="onRemove">
				</DeliverFileUpload>
				<view class="u-text-center">
					场地所有权正面租赁合同
				</view>
			</view>
			<view class="u-m-t-20">
				<DeliverFileUpload :maxCount="1" :width="300" @success="onThreeSuccess" @remove="onRemove">
				</DeliverFileUpload>
				<view class="u-text-center">
					公司门头照
				</view>
			</view>
			<view class="u-m-t-20">
				<DeliverFileUpload :maxCount="1" :width="300" @success="onFourSuccess" @remove="onRemove">
				</DeliverFileUpload>
				<view class="u-text-center">
					经营场景照片
				</view>
			</view>
		</view>
		<u-form :model="form" ref="uForm" class="person-add__form ">
			<u-form-item label="企业名称" label-width="200rpx"><u-input v-model="form.companyName"
					placeholder="请输入企业名称" /></u-form-item>
			<u-form-item label="统一信用码" label-width="200rpx"><u-input v-model="form.busiLicenseCode"
					placeholder="输入营业执照上的信用代码" /></u-form-item>
			<u-form-item label="法人代表姓名" label-width="200rpx"><u-input v-model="form.legalName" placeholder=""
					disabled="true" /></u-form-item>
			<u-form-item label="营业执照有效期" label-width="250rpx">
				<u-radio-group v-model="radio" class="person-add__date-group">

					<u-radio key="1" name="有效期" :disabled="false">
						有效期
						<view class="person-add__end-date"><u-input v-model="form.busiLicensePeriod" type="select"
								placeholder="结束时间" @click="showDate = true" />
							<u-picker mode="time" v-model="showDate" :params="dateParams"
								@confirm="checkDeadDate"></u-picker>
						</view>

					</u-radio>
					<u-radio key="2" name="永久有效">
						长期
					</u-radio>
				</u-radio-group>
			</u-form-item>

		</u-form>
		<u-button type="primary" :custom-style="customStyle" @click="nextStep()">下一步</u-button>
	</view>
</template>

<script>
	import city from "../components/city/city.vue";
	import DeliverFileUpload from "@/components/DeliverFileUpload/DeliverFileUpload.vue";
	export default {
		components: {
			city,
			DeliverFileUpload,
		},
		data() {
			return {
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					margin: '20rpx'
				},
				cityTip: "省/市/区",
				showCity: false,
				showDate: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					licenseImg: '',
					securitiesImg: "",
					doorImg: "",
					premisesImg: "",
					companyName: '',
					busiLicenseCode: "",
					legalName: "", //人像
					busiLicensePeriod: "", //永久传0

				},
				fileList: [],
				radio: "有效期",
				ocrParam: {
					"path": "",
					"ocrType": "BUSINESS_LICENSE"
				},
				basicForm: {}

			};
		},
		onLoad(options) {
			this.basicForm = JSON.parse(decodeURIComponent(options.basicForm));
			this.form.legalName = this.basicForm.legalName;

		},

		methods: {
			selectCity(Object) {
				console.log("Object=" + JSON.stringify(Object))
				this.form.provinceCode = Object.accountProvince;
				this.form.cityCode = Object.accountCity;
				this.form.areaCode = Object.accountArea;
			},
			checkDeadDate(e) {
				console.log("e=" + JSON.stringify(e))
				this.form.legalIdCardValidity = e.year + e.month + e.day;
			},
			onRemove(index) {
				this.fileList.splice(index, 1);

			},
			onTwoSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.securitiesImg = filePath;
			},
			onThreeSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.doorImg = filePath;
			},
			onFourSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.premisesImg = filePath;
			},
			onOneSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.licenseImg = filePath;
				//0cr接口
				this.getOcrRead(filePath);
			},
			getOcrRead(filePath) {
				const _that = this;
				_that.ocrParam.path = filePath;
				this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {

					console.log("data=" + JSON.stringify(data.words_result))
					if (data.words_result) {
						_that.form.companyName = data.words_result.单位名称.words;
						_that.form.busiLicenseCode = data.words_result.社会信用代码.words;
					}
				});
			},
			nextStep() {
				const _that = this;



				if (!_that.form.licenseImg) {
					uni.$zx.msg("请上传营业执照", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.securitiesImg) {
					uni.$zx.msg("请上传场地所有权照片", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.doorImg) {
					uni.$zx.msg("请上传门头照", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.premisesImg) {
					uni.$zx.msg("请上传经营场景照片", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.companyName) {
					uni.$zx.msg("请输入企业名称", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.busiLicenseCode) {
					uni.$zx.msg("请输入统一信用码", {
						duration: 4000,
					});
					return;
				}
				if (!_that.radio == "有效期") {
					if (!_that.form.busiLicensePeriod) {
						uni.$zx.msg("请选择身份证有效期", {
							duration: 4000,
						});
						return;
					}

				} else {
					_that.form.busiLicensePeriod = "0";
				}


				this.$u.route({
					url: 'packageC/pages/business/addCompanyThird',
					params: {
						"basicForm": encodeURIComponent(JSON.stringify(_that.basicForm)),
						"companyForm": encodeURIComponent(JSON.stringify(_that.form)),
					}
				})


			}
		}
	};
</script>

<style scoped lang="scss">
	.person-add {
		background-color: white;

		&__top {
			width: 100%;
		}

		&__content {
			background-color: white;
		}

		&__tip {
			background-color: #f6f6f6;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			font-size: 12px;
		}

		&__form {
			background-color: white;

		}

		&__date-group {
			display: flex;
			flex-direction: column;
		}

		&__end-date {
			width: 200rpx;
			margin-left: 20rpx;
			display: inline-block;
		}
	}
</style>